<script setup>
  import { ref } from "vue";
  import { bxjVerify } from "@/utils/bxjVerify";
  import { PASSWORD_NULL, PASSWORD_INCONSISTENT } from "@/utils/constants";
  const { validateEmail, validateField, validateCode, endVerify } = bxjVerify();
  const form = ref({
    name: "",
    email: "",
    code: "",
    password: "",
    cPassword: "",
  });
  const fail = ref(false);
  const failMes = ref(null);
  // 提交表单
  const formRef = ref(null);
  const sendCode = () => {
    alert("发送验证码");
  };
  const onSubmit = (event) => {
    event.preventDefault();
    if (endVerify(inputRefs, inputs, form) || validateCPassword(form)) return;
    alert("got it!");
  };
  const validateCPassword = () => {
    if (form.value.password === "" && form.value.cPassword === "") {
      failMes.value = PASSWORD_NULL;
      fail.value = true;
      return true;
    }
    if (form.value.password !== form.value.cPassword) {
      fail.value = true;
      failMes.value = PASSWORD_INCONSISTENT;
      return true;
    }
  };
  // 获取子组件的引用数组
  const inputRefs = ref([]);
  // 存储所有输入框的配置
  const inputs = ref([
    {
      name: "name",
      label: "用户名",
      modelValue: form.value.name, // 将表单的值绑定到这里
      iconClass: "icon-feather-user",
      placeholder: "输入用户名",
      failTip: "用户名长度必须大于3位",
      onBlurMethod: validateField, // 绑定自定义的失去焦点方法
    },
    {
      name: "email",
      label: "邮箱",
      modelValue: form.value.email, // 将表单的值绑定到这里
      iconClass: "icon-feather-mail",
      type: "email",
      placeholder: "name@example.com",
      failTip: "请输入正确的邮箱",
      buttonName: "验证码",
      addButton: true,
      onButtonMethod: sendCode, // 绑定按钮触发函数
      onBlurMethod: validateEmail, // 绑定自定义的失去焦点方法
    },
    {
      name: "code",
      label: "验证码",
      modelValue: form.value.code, // 将表单的值绑定到这里
      iconClass: "icon-material-outline-notifications-active",
      type: "string",
      failTip: "请输入正确的验证码",
      onBlurMethod: validateCode, // 绑定自定义的失去焦点方法
    },
    {
      name: "password",
      label: "密码",
      modelValue: form.value.password, // 将表单的值绑定到这里
      iconClass: "icon-feather-lock",
      type: "password",
      placeholder: "*******",
      half: true,
    },
    {
      name: "cPassword",
      label: "确认密码",
      modelValue: form.value.cPassword, // 将表单的值绑定到这里
      iconClass: "icon-feather-lock",
      type: "password",
      placeholder: "*******",
      half: true,
    },
  ]);
</script>
<template>
  <!-- Content
    ================================================== -->
  <div
    uk-height-viewport
    class="uk-flex uk-flex-middle"
  >
    <div class="uk-width-2-3@m uk-width-1-2@s m-auto rounded">
      <div
        class="uk-child-width-1-2@m uk-grid-collapse bg-gradient-warning"
        uk-grid
      >
        <!-- column one -->
        <div
          class="uk-margin-auto-vertical uk-text-center uk-animation-scale-up p-3 uk-light"
        >
          <img
            src="@/assets/images/logo-light-icon.png"
            width="45"
            alt=""
          />
          <h1 class="mb-4 mt-2">GoTube</h1>
          <p>The Place You can Share Your Videos.</p>
        </div>

        <!-- column two -->
        <div class="uk-card-default p-6">
          <div class="my-4 uk-text-center">
            <h3 class="mb-0">Create new Account</h3>
            <p class="my-2">Fill blank to create new account.</p>
          </div>

          <el-form
            :model="form"
            ref="formRef"
            :status-icon="true"
            class="uk-child-width-1-1 uk-grid-small"
            uk-grid
          >
            <BxjInput
              v-for="(input, index) in inputs"
              :key="index"
              ref="inputRefs"
              :label="input.label"
              v-model="form[input.name]"
              :iconClass="input.iconClass"
              :placeholder="input.placeholder"
              :half="input.half"
              :failTip="input.failTip"
              :addButton="input.addButton"
              :buttonName="input.buttonName"
              :onButtonMethod="input.onButtonMethod"
              :onBlurMethod="input.onBlurMethod"
            />
            <span
              class="error"
              v-if="fail"
            >
              {{ failMes }}
            </span>
            <div>
              <div
                class="mt-4 uk-flex-middle uk-grid-small"
                uk-grid
              >
                <div class="uk-width-expand@s">
                  <p>
                    Do you have account
                    <router-link to="/login">
                      <a href="#"
                        ><span style="text-decoration: underline"
                          >Sign in</span
                        ></a
                      >
                    </router-link>
                  </p>
                </div>
                <div class="uk-width-auto@s">
                  <button
                    @click="onSubmit"
                    class="BxjButton"
                  >
                    注册
                  </button>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <!--  End column two -->
      </div>
    </div>
  </div>
</template>
<style scoped>
  .error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
  }
  .BxjButton {
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 16px;
    border-radius: 0.5em;
    background: #e8e8e8;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
    box-shadow:
      6px 6px 12px #c5c5c5,
      -6px -6px 12px #ffffff;
  }

  .BxjButton:active {
    color: #666;
    box-shadow:
      inset 4px 4px 12px #c5c5c5,
      inset -4px -4px 12px #ffffff;
  }
</style>
